<template>
    <footer class="f-footer">
        <tabbar>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 0" link="/home">
                <i slot="icon" class="iconfont icon-home"></i>
                <i slot="icon-active" class="iconfont icon-home-fill"></i>
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 1" link="/assessment">
                <i slot="icon" class="iconfont icon-loan"></i>
                <i slot="icon-active" class="iconfont icon-loan-fill"></i>
                <span slot="label">信用</span>
            </tabbar-item>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 2" link="/news">
                <i slot="icon" class="iconfont icon-news"></i>
                <i slot="icon-active" class="iconfont icon-news-fill"></i>
                <span slot="label">资讯</span>
            </tabbar-item>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 3" link="/advisory">
                <i slot="icon" class="iconfont icon-wang"></i>
                <i slot="icon-active" class="iconfont icon-wangfill"></i>
                <span slot="label">咨询</span>
            </tabbar-item>
        </tabbar>
    </footer>
</template>

<script>
    /**
     * Created by c.y on 2018/3/20.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * IOS上架的全局的footer
     * selectIndex number类型 选中的那个tab
     */
    import { Tabbar, TabbarItem } from 'vux'

    export default {
        name: 'f-footer',
        data () {
          return {
              selectIndex: 0
          }
        },
        components: {
            Tabbar,
            TabbarItem,
        },
        methods: {
            handlerItemClick (index) {
                this.selectIndex = index;
            }
        },
        props: {
            index: {
                type: Number,
                default: 0
            }
        },
        activated: function () {
            this.selectIndex = this.index;
        }
    }
</script>

<style lang="less">
    .f-footer {
        .iconfont {
            font-size: 24PX;
        }
    }
</style>
